<% animation_css = local_assigns[:recently_created] ? "animate__animated animate__zoomIn" : "" %>

<li class="board--column cpy-grouping tour--column <%= animation_css %> <%= 'collapsed' if grouping.hidden %>"
  style="animation-duration: 240ms;"
  id="<%= dom_id(grouping) %>"
  data-controller="grouping-column"
  data-grouping-column-scroll-to-on-connect-value="<%= local_assigns[:recently_created] == true %>"
  data-grouping-column-grouping-id-value="<%= grouping.id %>"
  data-action="keypress.n@window->grouping-column#nWasPressed"
  data-visualization--board-target="column"
  >
  <header class="board--column--header">
    <%= link_to edit_visualization_grouping_path(grouping.visualization_id, grouping.id),
          class: "board--column--header-title",
          data: { turbo_frame: 'grouping_form' } do %>
      <% if grouping.hidden %>
        <% grouping.title.each_char do |char| %>
          <span><%= char %></span>
        <% end %>
      <% else %>
        <%= grouping.title %>
      <% end %>
    <% end %>

    <div class="board--column--header-actions">
      <%= link_to visualization_grouping_path(grouping.visualization_id, grouping, grouping: { hidden: !grouping.hidden }),
            class: "btn btn-ghost btn-square",
            data: {
              turbo_method: :patch
            } do %>
        <i class="ti  <%= grouping.hidden ? 'rotate-45 ti-arrows-diagonal' : 'rotate-135 ti-arrows-diagonal-minimize' %>"></i>
      <% end %>

      <div class="relative" data-controller="dropdown">
        <button role="button" data-action="click->dropdown#toggle click@window->dropdown#hide" class="btn btn-ghost btn-square cpy-column-menu-button tour--column-menu-button <%= 'hidden' if grouping.hidden %>">
          <i class="ti ti-dots"></i>
        </button>

        <ul data-dropdown-target="menu" class="hidden cpy-column-menu absolute left-0 top-full menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
          <li class="menu-title">
            <%= Issue.model_name.human(count: 2) %>
          </li>
          <li>
            <button class="cpy-new-issue menu-item"
              data-action="click->grouping-column#showInlineCardForm click->dropdown#toggle">
              <%= t('visualizations.column_menu.create_issue') %>
            </button>
          </li>
          <li><%= link_to t('visualizations.column_menu.move_all_issues'),
              move_all_issues_visualization_grouping_path(grouping.visualization_id, grouping.id),
              class: "menu-item",
              data: { turbo_frame: 'move_all_issues_modal', action: "click->dropdown#toggle" } %> </li>
          <li><%= link_to t('visualizations.column_menu.archive_all_issues'),
              archive_all_issues_visualization_grouping_path(grouping.visualization_id, grouping.id),
              class: "menu-item",
              data: {
                turbo_method: :post,
                turbo_confirm: t("visualizations.column_menu.archive_all_issues_confirmation", title: grouping.title),
                action: "click->dropdown#toggle"
              } %> </li>

          <li class="menu-title">
            <%= Grouping.model_name.human(count: 2) %>
          </li>
          <li><%= link_to t('visualizations.column_menu.edit_column'),
              edit_visualization_grouping_path(grouping.visualization_id, grouping.id),
              class: "cpy-edit-column menu-item",
              data: { turbo_frame: 'grouping_form', action: "click->dropdown#toggle" } %> </li>
          <li><%= link_to t('visualizations.column_menu.delete'),
              visualization_grouping_path(grouping.visualization_id, grouping),
              class: "menu-item link-error",
              data: { turbo_method: :delete, turbo_confirm: t("visualizations.column_menu.destroy_confirmation", title: grouping.title) } %> </li>
        </ul>
      </div>
    </div>
  </header>

  <div
    id="<%= grouping.id %>-cards-wrapper"
    class="board--column--card-list js-no-column-drag cpy-drop-zone"
    data-controller="sortable"
    data-sortable-target="container"
    data-sortable-shared-group-value="cards"
    data-sortable-move-path-value="<%= move_visualization_allocations_path(grouping.visualization) %>"
    data-sortable-grouping-id="<%= grouping.id %>"
    data-grouping-column-target="cardContainer"
    >

    <% unless grouping.hidden %>
      <% grouping.issues.active.each do |issue| %>
        <%= render partial: 'visualizations/card', locals: {
          issue:,
          visualization: ,
          scroll_on_connect: local_assigns[:open_issue] == issue
        } %>
      <% end %>
    <% end %>
  </div>

  <div class="board--column--footer">
    <%= render partial: 'visualizations/_column/inline_card_form', locals: { grouping:, visualization: } %>
    <button class="board--column--create-button cpy-inline-create-button tour--inline-create-button"
      data-grouping-column-target="showFormButton"
      data-action="click->grouping-column#showInlineCardForm">
      <p class="grow text-left flex items-center gap-1">
        <%= icon_for(:add_entry) %>
        <%= t('visualizations.column_menu.create_issue') %>
      </p>
      <span class="board--column--create-button-shortcut"><%= t("actions.press") %> N</span>
    </button>
  </div>
</li>
